<template>
  <div class="search u-page" :style="{ '--themeColor': themeColor }">
    <nav-bar title="搜索" />
    <div class="head">
      <div class="input">
        <u-search
          shape="round"
          :focus="isFocus"
          bgColor="#fff"
          clearabled
          v-model="queryParams.name"
          searchIconSize="26"
          maxlength="10"
          @focus="showHistory = true"
          @search="searchShop"
          @custom="searchShop"
          placeholder="搜索门店内商品"
        />
      </div>
    </div>
    <div class="histoy" v-if="showHistory">
      <div class="top">
        <div class="title">历史搜索</div>
        <u-icon
          name="trash"
          color="#888888"
          size="24"
          @click="clearHistory"
        ></u-icon>
      </div>
      <div class="list">
        <div
          class="one"
          v-for="item in historyList"
          :key="item"
          @click="setSearch(item)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div class="shop-list" v-else>
      <commodity v-for="(item, index) in goodsList" :key="index" :good="item" />
      <shop-card />
      <list-empty v-if="goodsList.length <= 0" />
    </div>
  </div>
</template>

<script>
import commodity from "@/components/pageComponents/sp-store/commodity";
import shopCard from "@/components/pageComponents/sp-store/shopCard";
import { searchGoods } from "@/service/api/sp-store/commodity";
import { mapState } from "vuex";
import ListEmpty from "@/components/baseComponents/list-enpty/index.vue";

export default {
  data() {
    return {
      isFocus: true,
      historyList: [],
      shopHistory: {},
      showHistory: false,
      queryParams: {
        pubShopId: "",
        name: "",
      },
      goodsList: [],
    };
  },
  components: {
    commodity,
    shopCard,
    ListEmpty,
  },
  onLoad(option) {
    // option?.shopId ? (this.isFocus = false) : "";
    this.queryParams.pubShopId = option?.shopId;
    this.getHistory();
  },
  onUnload() {
    this.setHistory();
  },
  computed: {
    ...mapState("sp-common/base", ["themeColor"]),
  },
  methods: {
    // 搜索
    searchShop() {
      let {
        queryParams: { name },
        historyList,
      } = this;
      if (!name) return;
      if (historyList.indexOf(name) !== -1) {
        historyList.splice(historyList.indexOf(name), 1);
      }
      this.historyList.unshift(name);
      if (historyList.length == 9) this.historyList.pop();
      this.showHistory = false;
      this.fetData();
    },
    // 获取商品搜索记录
    getHistory() {
      let {
        queryParams: { pubShopId },
      } = this;
      uni.getStorage({
        key: "shopHistory",
        success: (res) => {
          this.shopHistory = JSON.parse(res.data);
          this.historyList = this.shopHistory[pubShopId] || [];
        },
      });
    },
    // 获取商品
    fetData() {
      let { queryParams } = this;
      searchGoods(queryParams).then((res) => {
        this.goodsList = res;
        // this.queryParams.name = ''
      });
    },
    // 设置本地搜索记录
    setHistory() {
      let {
        shopHistory,
        shopId,
        queryParams: { pubShopId },
        historyList,
      } = this;
      if (shopHistory && shopHistory[pubShopId]) {
        shopHistory[pubShopId] = historyList;
      } else {
        shopHistory[pubShopId] = historyList;
      }
      uni.setStorage({
        key: "shopHistory",
        data: JSON.stringify(shopHistory),
      });
    },
    // 清空本地搜索记录
    clearHistory() {
      this.historyList = [];
    },
    //  点击搜索历史
    setSearch(item) {
      this.queryParams.name = item;
      this.searchShop();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/pages/sp-store/css/goods-search.scss";
</style>
